<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 为了确保适当的绘制和触屏缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Bootstrap-form</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="../assets/libs/bootstrap3/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="../assets/libs/bootstrap3/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../assets/libs/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script type="text/javascript" src="../assets/libs/bootstrap3/js/bootstrap.min.js"></script>
<script src="../assets/libs/jquery-validate/jquery.validate.js"></script>
<script src="../assets/libs/jquery-validate/jquery.validate-ext.js"></script>
<script src="./js/my.js"></script>
<style type="text/css">
.form-horizontal .form-group{
	margin-left: 0px;
	margin-right: 0px;
}
</style>
<script type="text/javascript">
$(function(){
	$.each($(".form-horizontal .dropdown-menu li"),function(i,v){
		$(v).click(function(){
			var $this=$(this);
			$this.parents("ul.dropdown-menu").prev("button").find("span[role='dropdown-text']").text($this.find('a').text());
			$this.parents("div.input-group-btn").prev("div.input-group-addon").text($this.find('a').text());
		})
	});
	$("form[role='form']").validate({
		debug:true,
		rules:{
			"fname":{
				required:{
					depends:function(element){
						return $.trim($(element).val())=="";
					}
				} 
			},
			"lname":{
				required:{
					depends:function(element){
						return $.trim($(element).val())=="";
					}
				} 
			},
			"name":{
				required:{
					depends:function(element){
						return $.trim($(element).val())=="";
					}
				} 
			},
			"sex":{
				required:true 
			},
			"hobby":{
				required:true 
			},
			"weight":{
				required:true 
			},
			"privateTel":{
				telOrMobile:true,
				require_from_group:[2,":input[role='tel']"]
			},
			"workTel":{
				telOrMobile:true,
				require_from_group:[2,":input[role='tel']"]
			},
			"familyTel":{
				telOrMobile:true,
				require_from_group:[2,":input[role='tel']"]
			},
			"email":{
				required:true 
			},
			"email1":{
				required:true 
			}
		},
		messages:{
			 fname:"first name or last name at least one",  
	         lname:"first name or last name at least one",
			"privateTel":{
				require_from_group:"电话至少输入{0}项"
			}
		},
		groups:{
			"username":"fname lname name"
		},
		errorClass:"has-error",
		validClass: "has-success",
		highlight: function(element, errorClass, validClass ) {
			$(element).parents('.form-group').addClass(errorClass).removeClass(validClass);
		},
		unhighlight: function(element, errorClass, validClass ) {
			$(element).parents('.form-group').addClass(validClass).removeClass(errorClass);
		},
		errorPlacement: function(error, element) {  
		    //error.appendTo(element.parent());//默认
		    var p_input=element.parents(".input");
			if ( element.is(":radio") ||element.is(":checkbox")){
		        error.insertAfter ( element.parents(".input") );
			}
		    /* else if ( p_input&&!p_input.hasClass("has-error")){
		        error.insertAfter( element.parents(".input") );
		    } */
		    else if ( element.parent().hasClass("input-group") ){
		        error.insertAfter(element.parent());
		    }else
		        error.appendTo( element.parent() );
		},
		submitHandler:function(form){
            alert("submitted");   
            //form.submit();
        }
	});
})

</script>
</head>
<body>
	<div class="container">
		<!-- row -->
		<div class="row">
			<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">Test</div>
			  <div class="panel-body">
				<form class="form-horizontal" role="form">
					<div class="row">
						  <div class="form-group col-md-12">
						    <label class="col-md-1 col-sm-2 control-label">姓名：</label>
						    <div class="col-sm-3">
						      <input name="fname" type="text" class="form-control" placeholder="姓名">
						    </div>
						    <div class="col-sm-3">
						      <input name="lname" type="text" class="form-control"  placeholder="姓名">
						    </div>
						    <div class="col-sm-3">
						      <input name="name" type="text" class="form-control"  placeholder="姓名">
						    </div>
						  </div>
					</div>
					<div class="row">
						  <div class="form-group col-md-6">
						    <label class="col-sm-2 control-label">性别：</label>
						    <div class="col-sm-10">
						    	<div class="input">
							      <label class="radio-inline">
									  <input  type="radio" name="sex" id="inlineRadio1" value="0">女
									</label>
									<label class="radio-inline">
									  <input type="radio" name="sex" id="inlineRadio2" value="1">男
									</label>
									<label class="radio-inline">
									  <input type="radio" name="sex" id="inlineRadio3" value="2">保密
									</label>
								</div>
						    </div>
						  </div>
						  <div class="form-group col-md-6">
						    <label for="age" class="col-sm-2 control-label">年龄：</label>
						    <div class="col-sm-10">
						    	<div class="input-group">
							      <input name="age" class="form-control" type="text" placeholder="Enter Age">
							      <div class="input-group-addon">岁</div>
							    </div>
						    </div>
						  </div>
					</div>
					<div class="row">
						  <div class="form-group col-md-6">
						    <label class="col-sm-2 control-label">生日：</label>
						    <div class="col-sm-10">
						      <input name="birthday" type="text" class="form-control" id="inputEmail3" placeholder="Email">
						    </div>
						  </div>
						  <div class="form-group col-md-6">
						    <label class="col-sm-2 control-label">体重:</label>
						    <div class="col-sm-10">
						     <div class="input-group">
							      <input name="weight" class="form-control" type="text" placeholder="体重">
							      <div class="input-group-addon">KG</div>
							    </div>
						    </div>
						  </div>
					</div>
					<div class="row">
						  <div class="form-group col-md-6">
						    <label for="inputEmail3" class="col-md-4 col-sm-2 control-label">邮箱：</label>
						    <div class="col-md-8 col-sm-10">
						    	<div class="input-group">
							      <div class="input-group-addon">@</div>
							      <input name="email1" class="form-control" type="text" placeholder="Enter email">
							    </div>
						    </div>
						  </div>
						  <div class="form-group col-md-6">
						    <label for="inputPassword3" class="col-md-4 col-sm-2 control-label">密码：</label>
						    <div class="col-md-8 col-sm-10">
						      <input name="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
						    </div>
						  </div>
					</div>
					<div class="row">
						  <div class="form-group col-md-6">
						    <label for="inputEmail3" class="col-md-4 col-sm-2 control-label">邮箱邮箱邮箱邮箱邮箱邮箱邮箱邮箱：</label>
						    <div class="col-md-8 col-sm-10">
						    	<div class="input-group">
							      <div class="input-group-addon">@</div>
							      <input name="email" class="form-control" type="text" placeholder="Enter email">
							    </div>
						    </div>
						  </div>
						  <div class="form-group col-md-6">
						    <label for="inputPassword3" class="col-md-4 col-sm-2 control-label">确认密码：</label>
						    <div class="col-md-8 col-sm-10">
						      <input name="repassword" type="password" class="form-control" id="inputPassword3" placeholder="Password">
						    </div>
						  </div>
					</div>
					<div class="row">
					  <div class="form-group col-md-12">
						    <label for="inputPassword3" class="col-sm-2 control-label">兴趣：</label>
						    <div class="col-sm-10">
						    	<div class="input">
									<label class="checkbox-inline"> <input type="checkbox"
										name="hobby" id="inlineCheckbox1" value="option1">跑步
									</label> <label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox2" value="option2">篮球
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
									<label class="checkbox-inline"> 
										<input name="hobby" type="checkbox" id="inlineCheckbox3" value="option3">游泳
									</label>
						    	</div>
							</div>
					  </div>
					</div>
					<div class="row">
					  <div class="form-group col-md-12" >
						    <label for="inputPassword3" class="col-sm-2 control-label">电话：</label>
						    <div class="col-sm-10 ">
						    	<div class="row input">
							      	<div class="col-sm-3">
								      <input name="privateTel" role="tel" type="text" class="form-control" placeholder="私人电话">
								    </div>
								    <div class="col-sm-3">
								      <input name="workTel" role="tel" type="text" class="form-control" placeholder="工作电话">
								    </div>
								    <div class="col-sm-3">
								      <input name="familyTel" role="tel" type="text" class="form-control" placeholder="家庭电话">
								    </div>
						    	</div>
						    </div>
					  </div>
					</div>
					<div class="row">
					  <div class="form-group col-md-6" >
						    <label class="col-sm-2 control-label">期限：</label>
						    <div class="col-sm-10 input-group">
						      	<input name="term" type="text" class="form-control">
						      	<div class="input-group-btn">
							        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span role="dropdown-text">单位</span>
							        <span class="caret"></span></button>
							        <ul class="dropdown-menu dropdown-menu-right" role="menu">
							          <li><a href="javascript:void(0);">年</a></li>
						              <li><a href="javascript:void(0);">月</a></li>
						              <li><a href="javascript:void(0);">日</a></li>
						              <li class="divider"></li>
						              <li><a href="javascript:void(0);">单位</a></li>
							        </ul>
							      </div><!-- /btn-group -->
						    </div>
					  </div>
					  <div class="form-group col-md-6" >
						    <label class="col-sm-2 control-label">重量：</label>
						    <div class="col-sm-10 input-group">
						      	<input name="weight" type="text" class="form-control">
						      	 <div class="input-group-addon">KG</div>
						      	<div class="input-group-btn">
						           <!--  <button type="button" class="btn btn-default">单位</button> -->
						            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
						              <span class="caret"></span>
						              <span class="sr-only">单位</span>
						            </button>
						            <ul class="dropdown-menu dropdown-menu-right" role="menu">
						              <li><a href="javascript:void(0);">年</a></li>
						              <li><a href="javascript:void(0);">月</a></li>
						              <li><a href="javascript:void(0);">日</a></li>
						              <li class="divider"></li>
						              <li><a href="javascript:void(0);">单位</a></li>
						            </ul>
						          </div>
						    </div>
					  </div>
					</div>
					<div class="row">
					  <div class="form-group col-md-12" >
						    <label for="inputPassword3" class="col-sm-2 control-label">备注：</label>
						    <div class="col-sm-10 ">
						      <textarea name="remark" rows="5" cols="" class="form-control"></textarea>
						    </div>
					  </div>
					</div>
				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-10">
				      <div class="checkbox">
				        <label>
				          <input name="rememberMe" type="checkbox"> 记住我
				        </label>
				      </div>
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-10">
				      <button type="submit" class="btn btn-primary">保存</button>
				    </div>
				  </div>
				</form>
			  </div>
			</div>
			</div>
		</div>
		<!-- row end-->
		<!-- row -->
		<div class="row">
			<div class="col-md-12">
				<form role="form">
					<div class="form-group">
						<label for="exampleInputEmail1">Email address</label> <input
							type="email" class="form-control" id="exampleInputEmail1"
							placeholder="Enter email">
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">Password</label> <input
							type="password" class="form-control" id="exampleInputPassword1"
							placeholder="Password">
					</div>
					<div class="form-group">
						<label for="exampleInputFile">File input</label> <input type="file"
							id="exampleInputFile">
						<p class="help-block">Example block-level help text here.</p>
					</div>
					<div class="checkbox">
						<label> <input type="checkbox"> Check me out
						</label>
					</div>
					<button type="submit" class="btn btn-default">Submit</button>
				</form>
			</div>
		</div>
		<!-- row end-->
		
		<!-- row -->
		<div class="row">
			<div class="col-md-12">
				<form class="form-horizontal" role="form">
				  <div class="form-group">
				    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
				    <div class="col-sm-10">
				      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
				    <div class="col-sm-10">
				      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-10">
				      <div class="checkbox">
				        <label>
				          <input type="checkbox"> Remember me
				        </label>
				      </div>
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-10">
				      <button type="submit" class="btn btn-default">Sign in</button>
				    </div>
				  </div>
				</form>
			</div>
		</div>
		<!-- row end-->
	</div>
	
	<!-- row -->
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">Test</div>
			  	<div class="panel-body">
					<form class="form-horizontal" role="form">
						<div class="form-group">
							<label class="col-xs-12 col-sm-2 control-label no-padding-right">
									<font color="red"> * </font>
									一级产品：
								</label>
								<div class="col-xs-12 col-sm-3">
									<span class="block input-icon input-icon-right">
										<select name="parentProductCd" class="form-control">
											<option selected="selected" value="63">邦微贷</option>
											<option value="201">邦易贷</option>
										</select>
									</span>
								</div>
								<div class="help-block col-xs-12 col-sm-reset inline"></div>
								<label class="col-xs-12 col-sm-2 control-label no-padding-right">
									<font color="red"> * </font>
									产品名称：
								</label>
								<div class="col-xs-12 col-sm-3">
									<span class="block input-icon input-icon-right">
										<input type="hidden" value="983" id="productCd" name="productCd">
										<input type="text" value="团结贷" name="productName" class="form-control">
									</span>
								</div>
								<div class="help-block col-xs-12 col-sm-reset inline"></div>
							</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- row  end -->
</body>
</html>